<script setup lang="ts">
import { getAllDepAPI } from '@/services/consult';
import type { Dep } from '@/types/consult';
import { ref } from 'vue';
import { useConsultStore } from '@/stores/consult'

const activeIndex = ref(0)
const list = ref<Dep[]>([])
const getAllDep = async () => {
  const res = await getAllDepAPI()
  list.value = res.data
}
getAllDep()

const store = useConsultStore()
</script>

<template>
  <div class="consult-dep-page">
    <cp-nav-bar title="选择科室" />
    <div class="wrapper">
      <van-sidebar v-model="activeIndex">
        <van-sidebar-item :title="dep.name" v-for="dep in list" :key="dep.id"/>
      </van-sidebar>
      <div class="sub-dep">
        <!-- 一定是跳同一个问诊页面, 只不过要将点击的科室 id 记录到 pinia 里面 -->
        <router-link to="/consult/illness" @click="store.setDep(subDep.id)" v-for="subDep in list[activeIndex]?.child" :key="subDep.id">
          {{ subDep.name }}
        </router-link>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.wrapper {
  height: calc(100vh - 46px);
  overflow: hidden;
  display: flex;
  .sub-dep {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    > a {
      display: block;
      padding: 14px 30px;
      color: var(--cp-dark);
    }
  }
}
.van-sidebar {
  width: 114px;
  &-item {
    padding: 14px;
    color: var(--cp-tag);
    &--select {
      color: var(--cp-main);
      font-weight: normal;
      &::before {
        display: none;
      }
    }
  }
}
</style>